<template>
	<view style="overflow: hidden;">
		<u-navbar title='我的收藏' :is-back="false" :border-bottom="false"></u-navbar>
		<view class="pr loading"  v-if="loading">
			<ourLoading :active="loading" translateY="50" color="#48A147" background-color="white" size="4"></ourLoading>
		</view>
		<template v-else>
			<view class="content " v-if="goodsList.length">
				
				<uni-swipe-action>
					<uni-swipe-action-item :auto-close="false" :show="isOpened" 
						v-for="(item,index) in goodsList" :key="item.platformGoodsId">
						<view class="item df jcsb aic ">
							<view class="df aic"  @click="handleDetail(item)">
								<u-image :src="item.images&&item.images.split(',')[0]" width="158" height="158" borderRadius="10"></u-image>
							</view>
							<view class="" style="width: 470rpx;">
								<view  @click="handleDetail(item)" class="c3 fs28 u-line-2">{{item.customGoodsName||''}}</view>
								<view   @click="handleDetail(item)" style="margin-top: 10rpx;" class="goodsLabel" v-if="item.platformGoodsSpecMix&&item.platformGoodsSpecMix[0].specName">
									{{item.platformGoodsSpecMix&&item.platformGoodsSpecMix[0].specName}}
								</view>
								<view  @click="handleDetail(item)" class="c9 fs22">{{item.introduce||''}}</view>
								<view class="df aic jcsb c3 fs24 mt5" >
									<view class="price df aic"  @click="handleDetail(item)">
										<Vip class="mr5" v-if="item.priceRangeOne&&TOKEN"></Vip>
										<text class="fw4 price fs22">¥</text><text class="fw5 price fs30">{{item&&item.priceRange}}</text>
								        <!-- <text class="c9 fs22" v-if="item.platformGoodsSpecMix&&item.platformGoodsSpecMix[0].saleUnit">/{{item.platformGoodsSpecMix&&item.platformGoodsSpecMix[0].saleUnit}}</text> -->
									</view>
									<view class="pr" >
										<u-badge v-if="item.platformGoodsSpecMix.length!=1" absolute :offset="[-13,-22]" size="mini"
											:count="checkNum(item)" type="error">
										</u-badge>
										<zm-number-box
										:saleUnit="item.platformGoodsSpecMix[0].saleUnit"
										 :startSaleNum="item.platformGoodsSpecMix[0].startSaleNum" :step="item.platformGoodsSpecMix[0].startSaleNum&&item.platformGoodsSpecMix[0].isDouble==1?item.platformGoodsSpecMix[0].startSaleNum:1" :disabledInput="item.platformGoodsSpecMix[0].isDouble==1" 
										 :key="item.platformGoodsId" v-if="item.platformGoodsSpecMix.length==1" size="40" @change.stop="valChange($event,item)"
											:min="0" v-model="item.platformGoodsSpecMix[0].purNum" v-else></zm-number-box>
										<!-- 多规格的情况下 需要选择规格 -->
										<!-- <nmr-icon v-else @click="chooseSkuShow(item,index)" name="jiatianjia-yuankuang" size="40"
											color="#47A848"></nmr-icon> -->
										<view class="fs22 df aic jcc spce-box" v-else @click="chooseSkuShow(item,index)">
											选规格
										</view>
									</view>
								</view>
								<text class="text-under c9 fs24 ml5" v-if="item.priceRangeOne&&TOKEN">原价:￥{{item.priceRangeOne}}</text>
							</view>
						</view>
						<template v-slot:right>
							<view class="df ">
								<view class="handle_sc fs24 df aic jcc pr" @click="handleShare(item)">
									<nmr-icon name="fenxiang-5" color="white"></nmr-icon>
									<view class="">分享</view>
									<button open-type="share" class="share"></button>
								</view>
								<view class="handle_delect fs24 df aic jcc" @click="handleDelect(index)">
									<nmr-icon name="shanchu-6" color="white"></nmr-icon>
									<view class="">删除</view>
								</view>
							</view>
						</template>
					</uni-swipe-action-item>
				</uni-swipe-action>
				<u-loadmore style="width: 100%;" margin-top="20" margin-bottom="30" :status="loadStatus"
					:load-text="loadText" />
			</view>
			<view class="empty" v-else>
				<view class="u-text-center" v-if="token">
					<image src="../../static/empty/collect-empty.png" style="width: 428rpx;height: 360rpx;" mode="widthFix">
					</image>
					<view class="fs28 c6 mt20">
						暂无收藏商品哦~
					</view>
					<view @click="goHome" class="go-home df aic jcc mt30">
						去首页逛逛
					</view>
				</view>
				<view class="u-text-center" v-else>
					<image src="../../static/empty/qualifications.png" style="width: 428rpx;height: 360rpx;" mode="widthFix">
					</image>
					<view class="fs28 c6 mt20">
						登录后可同步收藏列表
					</view>
					<view @click="showLogin" class="go-home df aic jcc mt30">
						立即登录
					</view>
				</view>
			</view>
		</template>
		<!-- <image src="../../static/collect/label.png" class="label"></image>
		<view class="goodsList">
			<goodsList :flowList="recordgoodList" ></goodsList>
		</view> -->
		<LoginPopup @loginSuccess="loginSuccess" ref="LoginPopup"></LoginPopup>
		<SkuPopup @changeCarList="changeCarList" :goodsCarList="cartList" @change="changeSku" v-model="showSku" :info="skuInfo" ></SkuPopup>
	</view>
</template>

<script>
	import ourLoading from '@/components/our-loading/our-loading.vue'
	import {
		bGoodsCollectList,
		bGoodsCollectDelect
	} from '@/api/collect.js'
	import Decimal from 'decimal.js'
	export default {
		components:{ourLoading},
		data() {
			return {
				loading:true,
				loadStatus: 'loadmore',
				pageNum: 1,
				pageSize: 20,
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				goodsList: [],
				token:'',
				showSku:false,
				shareInfo:{
					title:'',
					imageUrl:'',
				},
				skuInfo:{},
				currentIndexGoods:0,
				cartList:[]
			}
		},
		onReachBottom() {
			this.getGoodsList()
		},
		onLoad() {
		},
		onShow() {
			this.loading = true
			this.init()
			this.cartList = uni.getStorageSync('CARGOODLIST')
			this.getGoodsList()
			this.token = uni.getStorageSync('token')
		},
		
		methods: {
			handleDetail(e) {
				console.log(e)
				uni.navigateTo({
					url: '/pages/goods/detail?id=' + e.platformGoodsId 
				})
			},
			valChange(e, item) {
				this.$set(item.platformGoodsSpecMix[0], 'purNum', e)
				this.handleCart(item.platformGoodsSpecMix[0])
			},
			handleCart(e) {
				let goodsCarList = this.cartList||[]
				let index = goodsCarList.findIndex(i => i.platformGoodsSpecMixId == e.platformGoodsSpecMixId)
				if (index == -1) { //购物车中没有这个商品  新增操作
					goodsCarList.unshift(e)
				} else { //购物车中有这个商品  修改操作
					if (e.purNum == 0) { //删除操作
						goodsCarList.splice(index, 1)
					} else {
						//只有購物車的時候 才手動更新列表
						goodsCarList[index].purNum = e.purNum
						goodsCarList[index].busType = ''
						goodsCarList[index].platformPrice = e.platformPrice
					}
				}
				this.changeCarList(goodsCarList)
			},
			handleDelect(index){
				let goodsCollectId = this.goodsList[index].bgoodsCollectId
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定将该商品移出收藏？',
					success: function (res) {
						if (res.confirm) {
							that.bGoodsCollectDelect(goodsCollectId,index)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			bGoodsCollectDelect(id,index){
				bGoodsCollectDelect(id).then(res =>{
					if(res.code==200){
						this.goodsList.splice(index,1)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							mask:true
						})
					}
				})
			},
			changeCarList(e){
				this.cartList = e
				uni.setStorageSync('CARGOODLIST',this.cartList)
				let num = this.$common.clacCount(e)
				if(num==0){
					uni.removeTabBarBadge({index:3})
				}else{
					uni.setTabBarBadge({
					  index: 3,
					  text: num
					})
				}
			},
			changeSku(info){
				this.goodsList[this.currentIndexGoods] = info
			},
			chooseSkuShow(item,index) {
				this.currentIndexGoods = index
				this.skuInfo = item
				this.showSku = true
			},
			checkNum(item){
				let numAll = new Decimal(0)
				item.platformGoodsSpecMix.forEach(i => {
								numAll =  new Decimal(i.purNum).add(numAll)
				})
				return numAll
			},
			clacGoods(list){
				return new Promise((resolve,reject) =>{
					list.forEach(e => {
						e.platformGoodsSpecMix.forEach(mix =>{
							let info = this.cartList.find(_e => _e.platformGoodsSpecMixId === mix
								.platformGoodsSpecMixId)
							if (info) {
								this.$set(mix,'purNum',info.purNum)
								this.$set(mix,'checkFlag',true)
							}else{
								this.$set(mix,'purNum',0)
								this.$set(mix,'checkFlag',true)
							}
						})
						
					})
					resolve(list)
				})
			},
			handleShare(e){
				this.shareInfo.title = e.goodsName
				this.shareInfo.imageUrl = e.images
				this.shareInfo.platformGoodsId = e.platformGoodsId
			},
			init() {
				this.loadStatus = 'loadmore'
				this.pageNum = 1
				this.pageSize = 20
				this.goodsList = []
			},
			goHome(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			loginSuccess() {
				this.token = uni.getStorageSync('token')
				this.getGoodsList()
			},
			showLogin() {
				this.$refs.LoginPopup.checkLogin()
			},
			getGoodsList(e) {
				if (this.loadStatus == 'nomore' || this.loadStatus == 'loading'||!uni.getStorageSync('token')) {
					console.log('----')
					this.loading = false
					return
				}
				this.loadStatus = 'loading'
				bGoodsCollectList({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
				}).then(async res => {
					if (res.code == 200) {
						let list = await this.clacGoods(res.rows)
						this.goodsList.push(...list)
						this.pageNum = ++this.pageNum;
						if (res.rows.length < this.pageSize) {
							this.loadStatus = 'nomore' //不用加载下一页
						} else {
							this.loadStatus = 'loadmore' //不用加载下一页
						}
						this.loading = false
					} else {
						this.loadStatus = 'nomore'
						uni.showToast({
							title: res.msg,
							icon: "none",
						});
					}
				})
			},
		},
		
		onShareAppMessage(e) {
			if(e.from==='button'){
				return {
					title: this.shareInfo.title,
					path: `/pages/goods/detail?id=`+this.shareInfo.platformGoodsId,
					imageUrl: this.shareInfo.imageUrl,
				}
			}else{
				return {
					title: this.APPSHARE.title,
					path: this.APPSHARE.path,
					imageUrl: this.APPSHARE.imageUrl,
				}
			}
			
		},
	}
</script>

<style lang="scss" scoped>
	.share{
		position: absolute;
		width: 110rpx;
		height: 190rpx;
		opacity: 0;
	}
	.goodsList {
		margin: 0 20rpx 30rpx;
	}

	.label {
		width: 267rpx;
		height: 43rpx;
		margin-left: 242rpx;
		margin-bottom: 20rpx;

	}

	.handle_sc {
		width: 110rpx;
		// height: 190rpx;
		background: #48A147;
		color: white;
		flex-direction: column;
	}

	.handle_delect {
		background-color: #FF4500;
		width: 110rpx;
		// height: 190rpx;
		color: white;
		flex-direction: column;
	}

	/deep/ .uni-swipe {
		border-radius: 20rpx !important;
		background-color: white !important;
		margin-top: 20rpx;

	}

	.content {

		margin: 30rpx;
		margin-top: 0;

		.item {
			background: #FFFFFF;
			padding: 20rpx;
		}
	}

	.empty {
		margin-top: 250rpx;

		.go-home {
			width: 160rpx;
			height: 58rpx;
			background: linear-gradient(90deg, #48A147 0%, #8AE38A 100%);
			border-radius: 34rpx 34rpx 34rpx 34rpx;
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin: 0 auto;
			margin-top: 30rpx;
		}
	}

</style>